<template>
	<view class='denglu '>
		<view class="logo" >
			<image  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.wendangwang.com%2Fpic%2F30f59ba7bacf51867b349f69%2F1-345-png_6_0_0_13_4_526_158_893.25_1263.375-1150-0-20-1150.jpg&refer=http%3A%2F%2Fwww.wendangwang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628757343&t=cdcce21119d027fc52b8246ce1a91cff" mode="widthFix"></image>
		</view>
		<view class="box1">
		<view class="centent1">
			<picker @change="position" :range="array">
				<label style="font-size: 18px;">身份：</label>
				<label class="" style="font-size: 16px;float: right;">{{array[authority]}}</label>
			</picker>
		</view>
		<text class='infor'>请输入账号</text>
		
		<view class="from-wrap">
			<view class="flex-wrap input-wrap">
				 <text class="label">用户名：</text> 
				<input value="" id="username"type="number" class="account-info-input" name="uname" placeholder="学号/手机号" @input="onInput1" >
				
			</view>
			<view class="flex-wrap input-wrap">
			<text class="label">密码：</text>
			<input password=""id="password" class="account-info-input" name="upass" placeholder="输入密码 " @input="onInput2">
			
			</view>
		</view>
		
		<!-- <text class='infor'>管理员用户请点击管理员登录</text> -->
		<button class="mysubmit" type="primary"  @click="gopages()" style="width: 150px;height: 40px; margin-top: 10px;">登录</button>
		<!-- <button class="mysubmit" type="primary"  form-type="submit" @click="homepage1()"style="width: 150px;height: 40px; margin-top: 10px;" >管理员登录</button> -->
		<view style="text-align: center;padding-top: 20%;"><button class="cu-btn round line-blue shadow" role="button" aria-disabled="false" @click="goDetail()" size="mini" >点击注册</button></view>
	</view>
	</view>
	
	
</template>

<script>
	export default{
		data(){
			return{
			array:['--请选择--','学生','管理员'],
		      authority:0,
			
			  num:'',
			  pass:'',
			}
			
		},
		onLoad() {
			uni.request({
				url: 'http://rap2api.taobao.org/app/mock/286869/user/login',
				method: 'GET',
				data: {
				},
				success: res => {console.log('返回', res.data)},
				fail: () => {},
				complete: () => {}
			});
		},
		methods:{
			onInput1(e){//获取输入框里面的内容
				this.num=e.detail
			},
			onInput2(e){//获取输入框里面的内容
				this.pass=e.detail
			},
				
			 position(e){
				this.authority=e.target.value;
				this.arraytype=this.array[this.authority];			
			},
			gopages(){
					
				if((this.authority==1||this.authority==2)&&this.num!=''&&this.pass!=''){	//传入的参数，index，1代表管理员，2代表学生
				uni.showToast({
					title:'登录成功',
					icon:'none',
					duration:2000,
				});
				setTimeout(function(){
					uni.navigateBack({
					url:'../index/index'
				})
				},1000);
					
				}
				else if(this.authority==0||this.pass==''||this.num==''){
					uni.showToast({
						title:'请填写完整！',
						icon:'none',
						duration:2000
						
					})
				}
			
			},
			goDetail(){
					uni.navigateTo({
						url:'login/login'
					})
			}
		}
	}
</script>

<style>
	page{
		width: 100%;
		height: 100%;
	}
	.box1{
		margin:20px 0px;
		
	}
	.centent1{
		width: 100%;
		height: 30px;
	}
	.logo{
		
	    width: 100%;
		height: 30%;
		background-color: #ffffff;
	}
	.denglu{
		background-color:  rgba(28, 187, 180, 0.2);
		height: 100%;
		width: 100%;
		displayp: flex;
		flex-direction:column;
		align-content:space-between;
		box-sizing:border-box;
		padding:0px 0px;
	}
		
	.infor{
		display:block;
		margin: 8px 0;
		color:#808080;
		font-size: 16px;
	}
	.label{
		color: #999999;
		width: 5em;
		font-size: 16px;
		
	} 
	.account-info-input{
		font-size: 18px;
		line-height: 100%;
		margin: 4px;
	}
	.flex-wrap{
		display: flex;
		flex-direction: row;
	}
	.input-wrap{
		background:#FFFFFF;
		border-bottom: 1px solid #eee;
		margin: 0 -12px;
		padding: 0 12px;
		height: 46px;
		line-height: 46px;
	}
</style>
